<template>
  <BasicModal :title="getTitle" @register="registerModal" destroyOnClose
              :canFullscreen="false" :centered="true"
              :width="500" :height="330"
              :bodyStyle="{padding:'8px'}"
              @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" :model="model"></BasicForm>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, onMounted, reactive } from "vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import { useForm } from "/@/components/Form";
import { useMessage } from "/@/hooks/web/useMessage";
import { usePermission } from '/@/hooks/web/usePermission';

import moment from 'dayjs'
import BasicForm from "/@/components/Form/src/BasicForm.vue";

const { hasPermission } = usePermission();

interface AccountFlowPay {
  dwmc: String,
  bankId: String,
  jzsj: String,
  je: number
}

let model = reactive<AccountFlowPay>({
  dwmc : '',
  bankId : '',
  jzsj : '',
  je : 0,
});

const $message = useMessage();

const ddlx = ref("");
const sffs = ref("");

const getTitle = computed(() => {
  let title = "支付"
  if (sffs.value == "1") {
    title = "转账" + title;
  } else if (sffs.value == "3") {
    title = "挂账" + title;
  } else if (sffs.value == "4") {
    title = "划转" + title;
  }
  console.info("title=" + title + ", sffs=" + sffs.value);
  return title;
});

// 声明Emits
const emit = defineEmits(['success', 'register']);

const [registerForm, {resetFields, setFieldsValue, validate, clearValidate, updateSchema}] = useForm({
  schemas: [
    {
      label: "收款单位",
      field: "dwmc",
      component: "InputTextArea",
      componentProps: { size: "small", readonly: true },
      required: true
    },
    {
      label: "转出部门",
      field: "ddlx",
      component: "JDictSelectTag",
      componentProps: { 
        dictCode: "ddlxType",
        placeholder: " ",
        getPopupContainer: () => document.body,
      },
      dynamicDisabled: true,
      dynamicRules: ({model}) => {
        console.info("model=" + JSON.stringify(model));
        if (sffs.value == "4") {
          return [{required: true, message: "转出部门不能为空"}]
        } else {
          return []
        } 
      },
      ifShow:({model}) => {
        return sffs.value == "4"
      }
    },
    {
      label: "转出部门",
      field: "ddlx2",
      component: "JDictSelectTag",
      componentProps: { 
        dictCode: "ddlxType",
        placeholder: " ",
        getPopupContainer: () => document.body,
      },
      dynamicRules: ({model}) => {
        console.info("model=" + JSON.stringify(model));
        if (sffs.value == "4") {
          return [{required: true, message: "转出部门不能为空"}]
        } else {
          return []
        } 
      },
      ifShow:({model}) => {
        return sffs.value == "4"
      }
    },
    {
      label: "付款账户",
      field: "bankId",
      component: "JDictSelectTag",
      componentProps: {
        dictCode: "chee_bank,djm,id@ddlxBank",
        placeholder: " ",
        defaultActiveFirstOption: true,
        stringToNumber: true,
        getPopupContainer: () => document.body,
      },
      required: true
    },
    {
      label: "记账日期",
      field: "jzsj",
      component: "DatePicker",
      componentProps: { valueFormat: "YYYY-MM-DD", allowClear: false },
      rules: [{ required: true, type: "string" }]
    },
    {
      label: "金额",
      field: "je",
      component: "InputNumber",
      componentProps: { placeholder: " " },
      required: true,
    },
    {
      field: 'xnsz',
      label: '虚拟收支',
      component: 'Switch',
      colProps: { span: 5 },
      defaultValue: 0,
      componentProps: {
        checkedChildren: '是',
        checkedValue:1,
        unCheckedChildren: '否',
        unCheckedValue: 0
      },
      ifShow: ({ values }) => {
        return hasPermission('business:virtaul');
      },
    },
  ],
  labelWidth: 100,
  baseColProps: {span: 20},
  showActionButtonGroup: false,
})


//表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  await resetFields();
  setModalProps({confirmLoading: false});
  console.info("record=" + unref(data?.record));
  //表单赋值
  await setFieldsValue(data?.record || {})
  clearValidate();
  
  ddlx.value = data.record.ddlx;
  sffs.value = data.record.sffs;

  console.info("record=" + unref(data?.record));
  // 收支下拉选择数据
  updateSchema([
    {
      field: "bankId",
      component: "JDictSelectTag",
      componentProps: {
        dictCode: "bank,djm,id@ddlxBank?ddlx=" + ddlx.value,
      },
    },
  ])
});

//表单提交事件
async function handleSubmit() {
  try {
    setModalProps({confirmLoading: true});
    const values = await validate();
    emit("success", values)
    closeModal();
  } catch (e) {
    console.log(e);
  } finally {
    setModalProps({confirmLoading: false});
  }
}

</script>
